<template>
    <!-- <div> -->
        <el-row :gutter="20" class="temCardHome">
          <el-col class="cardCol el-col-xxs-24" :xs="12" :sm="6" :md="6"   v-for="cnb in newCookBook" :key="cnb.cbid" >
            <el-card :body-style="{ padding: '0px' }">
                <router-link class="imgBox" :to="{name: 'Itemlist', params:{foodId: cnb.cbid}}">
                     <img :src="cnb.finalcook" class="image">
                </router-link>
              <div class="inner" style="padding: 15px;">
                <router-link class="title" :to="{name: 'Itemlist', params:{foodId: cnb.cbid}}" >{{cnb.cbname}}</router-link>
                <div class="bottom clearfix">
                  <span><label class="el-icon-view"></label> {{cnb.pageview}}</span>
                  <span><label class="el-icon-star-on"></label> {{cnb.staroffs.length}}</span>
                </div>
                <div class="photo">
                    <img :src="cnb.user.headimage" alt="" onerror="this.onerror=null;this.src='../assets/img/tou.png'">
                    <p>{{cnb.user.petname}}</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
    <!-- </div> -->
</template>

<script>

import axios from 'axios'

export default {
  data () {
    // 选项 / 数据
    return {
      newCookBook: []
    }
  },
  methods: {
    // 事件处理器
  },
  components: {
    // 定义组件
  },
  async created () {
    // 生命周期函数
    //最新菜谱
    var url = '/api/consumer-index/index_consumer/getNewCookBookForIndex'
    axios.get(url).then(res =>{
      this.newCookBook = res.data
    })

  }
}
</script>

<style>
.temCardHome .cardCol {
  margin-bottom: 20px;
}
.temCardHome .time {
  font-size: 13px;
  color: #999;
}
.temCardHome .inner {
  position: relative;
}
.temCardHome .photo {
  position: absolute;
  right: 8px;
  top: -14px;
  text-align: center;
  overflow: hidden;
  font-size: 12px;
  color: #6a6a6a;
  width: 82px;
}
.temCardHome .photo img {
  background: #fff;
  width: 46px;
  height: 46px;
  border: 2px solid #fff;
  border-radius: 50%;
  /*padding:5px;*/
}

.temCardHome .bottom {
  margin-top: 12px;
  line-height: 12px;
}
.temCardHome .bottom span {
  font-size: 12px;
  color: #6a6a6a;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 10px;
}

.temCardHome .button {
  padding: 0;
  float: right;
}
.temCardHome .imgBox {
  width: 100%;
  height: 200px;
  cursor: pointer;
  display: block;
  border-radius: 4px;
}
.temCardHome .image {
  /*max-width: 100%;*/
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*display: inline-block;*/
  /*display: block;*/
}
.temCardHome .title {
  cursor: pointer;
  font-size: 16px;
  color: #333;
}
</style>
